<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<link rel="stylesheet" media="screen" href="css/docs.css"/>
<link rel="stylesheet" media="screen" href="lib/jqplot/jquery.jqplot.min.css"/>
<!-- jQplot SETUP -->
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/jqplot/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="lib/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.bubbleRenderer.min.js"></script>
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css" />
<script type="text/javascript"
	src="lib/datatables/js/jquery.dataTables.js"></script>


<script type="text/javascript">
    function loadChartImage(title,value) {
        //var profits = [87.65,98.40, 65.39,93.20,78.00,67.98,78.45,89.56,87.10,69.56,96.20,100];
        //var tickslabel = ['一月', '二月', '三月', '四月','五月','六月','七月', '八月', '九月', '十月','十一月','十二月'];
        var profits=value;
        var tickslabel=title;                      
        var ylabel = ['Profits'];


        //line with some options
        var chart2 = $.jqplot('chart2', [profits], {
            title:'考核历史数据',
            legend:{
                show:true,
                labels:['考核总分'],
                location:'ne'
            },
            axes:{
                xaxis:{
                    renderer:$.jqplot.CategoryAxisRenderer ,
                    ticks:tickslabel
                },
                yaxis:{
                    tickOptions:{
                        formatString:'%.2f 分'
                    }
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 7.5,
                tooltipAxes:'y'
            },
            cursor: {
                show: false
            }
        });

    };

    function loadScoreLine(showType){
		$.ajax({
	        type:"get",
	        url:"/ajax/statisticsscore_list.xhtml?periodEnum=${type}&workId=${empId}&showYearlyEnum=" + showType,
	        //data: "name=John&location=Boston",
	        dataType:"json",
	        success:function (data) {
	        	if(data != null){
	        		$("#chart2").html("");
	        		loadChartImage(data.title,data.value);
	        	}
	        }
	    });
	}


    function getItemDetail(year, month){
        $.ajax({
	        type:"get",
	        url:"/exam/statistics_item_detail.xhtml?type=${type}&empId=${empId}&y=" + year + "&m=" + month,
	        //data: "name=John&location=Boston",
	        type:"POST",
            dataType:"html",
            cache:false,
	        success:function (data) {
        		var obj = $("#item_contents");
       		 	obj.html(data);
	        }
	    }); 

    }
	$(document).ready(function(){
		loadScoreLine("present_year");
        <s:if test="#request.examPeriod != null">
			getItemDetail(${examPeriod.examYear},${examPeriod.examMonthly});
		</s:if>
	});

    var cmonthly = [1,2,3,4,5,6,7,8,9,10,11,12];
	var csimonthly = [2,4,6,8,10,12];
	var cseason = [3,6,9,12];
	var chalfyear = [6,12];
    function tooltip_callback(score, index){
    	var currentyear = eval("${examPeriod.examYear}");
    	var year,month;
    	var showtype = $("#form-timezone").val();
    	if(showtype == "all"){
    		var tips = tickslabel[index];
    		try{
    			year = parseInt(tips.substring(0,tips.indexOf("年")).replace(",",""));
    			month = parseInt(tips.substring(tips.indexOf("年") + 1,tips.indexOf("月")));
    			getItemDetail(year,month);
    		}catch(error){

    		}
    	}else{
    		if(showtype == "present_year"){
        		year = currentyear;
    		}else{
    			year = currentyear - 1;
    		}
	        var type = "${type}";
	        if(type == "monthly"){
	        	month = cmonthly[index];
	        }else if(type == "bimonthly"){
	        	month = csimonthly[index];
	        }else if(type == "season"){
	        	month = cseason[index];
	        }else if(type == "semiyearly"){
	        	month = chalfyear[index];
	        }else if(type == "annually"){
	        	month = 12;
	        }
	        getItemDetail(year,month);
    	}
    }
</script>
<!-- jQplot SETUP END -->

<h1 class="page-title">考核历史浏览-查看全年分数</h1>

<div class="container_12 clearfix">
    <section class="portlet grid_12 leading docs">
        <header>
            <h2>考核打分</h2>
        </header>
        <section>

            <DIV class="portlet">
                <header>
                    <h5_n>${employeeinfoWork.baseId.name}</h5_n>
                    <h2>
                        <s:if test="#request.employeeinfoWork.baseId.sex == \"0\"">先生</s:if>
                        <s:else>女士</s:else>
                    </h2>
                </header>
                <section class="clearfix">


                    <div class="grid_2 alpha" style="text-align: center">
                        <img src="${employeeinfoWork.baseId.facePath}" width="120"
                             height="135" onerror="this.src='${ctx}/images/Avatar.jpg'"/>

                    </div>
                    <div class="grid_3">
                        <dl>
                            <dt>岗位</dt>
                            <dd>
                                <h6>${employeeinfoWork.duty.dutyName}</h6>
                            </dd>
                            <dt>员工号</dt>
                            <dd>
                                <h6>${employeeinfoWork.workNo}</h6>
                            </dd>
                            <dt>职等</dt>
                            <dd>
                                <h6>${employeeinfoWork.grade.gradeName}</h6>
                            </dd>
                        </dl>
                    </div>
                    <div class="grid_3">
                        <dl>
                            <dt>部门</dt>
                            <dd>
                                <h6>${employeeinfoWork.organization.fullName}</h6>
                            </dd>
                            <dt>职务</dt>
                            <dd>
                                <h6>${employeeinfoWork.duty.dutyName}</h6>
                            </dd>
                            <dt>职级</dt>
                            <dd>
                                <h6>${employeeinfoWork.gradeLevel.gradeSort}</h6>
                            </dd>
                        </dl>
                    </div>
                    <div class="grid_3 omega">
                        <dl>
                            <dt>工龄</dt>
                            <dd>
                                <h6>${employeeinfoWork.workAge}</h6>
                            </dd>
                            <dt>考核记录</dt>
                            <dd>
                                <h6>92分</h6>
                                <select id="form-timezone" style="opacity: 0;" onchange="loadScoreLine(this.value)">
                                    <option value="present_year">显示本年度</option>
                                    <option value="last_year">显示上年度</option>
                                    <option value="all">显示全部</option>
                                </select>
                            </dd>

                        </dl>
                    </div>


                </section>
            </DIV>

            <div class="leading">
                <div class="jqPlot" id="chart2" style="width:100%;height:200px;"></div>
            </div>
            <div class="clear"></div>
            <div class="leading" id="item_contents">

			</div>
            
            <h4>&nbsp;</h4>
        </section>
    </section>
</div>